<script setup lang="ts">

</script>

<template>
  <main style="height: 200px; width: 100%; overflow-y: auto">
    <div id="progress"></div>
    <section style="height: 400px">
      <article>
        <p style="margin: 40px;">this is article</p>
      </article>
    </section>

  </main>
</template>

<style scoped lang="scss">
main {
  position: relative;
}
#progress{
  width: 100%;
  height: 10px;
  background-color: #c00bc0;
  position: sticky;
  top: 0;
  left: 0;

  transform-origin: 0 50%;
  animation: progress linear;
  animation-timeline: scroll();
}
@keyframes progress {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
</style>